<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="val" onchange="valueChange.call(this)">

    <script>
        function valueChange() {
            console.dir(this.value);
        }
        var ele = document.getElementById("val");
        // Object.defineProperty(ele,"value",{
        //     val:'',
        //     set:function(val){
        //         this.val = val;
        //         ele.dispatchEvent(new Event('change'));
        //     },
        //     get:function(){
        //         return this.val;
        //     }
        // })

        var obj = new Proxy(ele, {
            get: function (target, key, receiver) {
                // console.log(`getting ${key}!`);
                return Reflect.get(target, key);
            },
            set: function (target, key, value, receiver) {
                Reflect.set(target, key, value);
                if (key === "value") target.dispatchEvent(new Event('change'));
                return;
            }
        });

        // obj.value = "xxxx";
        // setTimeout(() => {
        //     obj.value="aaaa"
        // }, 1000);

        function print(name) {
            console.log(name);
        }

        function test() {
            print("d1")
            Promise.resolve().then(function(){
                print("d2");
            });
            print("d3");
        };
        test();

        setTimeout(function test4() {
            print("d4");
            console.log("d5");
        }, 3000);
        // (function(){

        //     ele.value = "aaaaaaa";
        //     ele.dispatchEvent(new Event('change'));

        //     ele.addEventListener('test',function(e){
        //         console.log(e);
        //     });

        //     ele.dispatchEvent(new Event('test'));
        //     console.log(ele);
        // })();

    </script>

</body>

</html>